<template>
  <div>
    <div class="group-delete">
      <div class="group-member">
        <el-checkbox-group v-model="deleteMemberList">
          <div v-for="(member,index) in members" :key="member.groupMemberId">
            <el-checkbox :label="member" :disabled="index==0">
              <div class="member">
                <div class="member-name">{{member.groupMemberName}}</div>
                <img class="member-avatar" :src="member.groupMemberAvatar" />
              </div>
            </el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
      <div class="group-select">
        <div v-for="(member,index) in deleteMemberList" :key="member.groupMemberId">
          <div class="member" @click="removeSelectedMember(index)">
            <span
                class="delete-icon iconfont icon-close"
              ></span>
            <div class="member-name">{{member.groupMemberName}}</div>
            <img class="member-avatar" :src="member.groupMemberAvatar" />
          </div>
        </div>
      </div>
    </div>
    <div style="text-align: center">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DeleteGroupMemberForm',
  props: {
    members: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      deleteMemberList: []
    }
  },
  methods: {
    removeSelectedMember (index) {
      this.deleteMemberList.splice(index, 1)
    },
    /**
     * dialog的取消按钮
     * */
    handleCancel () {
      this.$emit('cancel')
    },
    /**
     * dialog的确定按钮，确定选择的参会人员
     * */
    handleSubmit () {
      this.$confirm(
        '将删除被选中好友，是否继续？',
        '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          lockScroll: false
        })
        .then(() => {
          this.$emit('submit', this.deleteMemberList)
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
$height: 450px;
$font-color: #414141;
.group-delete {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  .group-member {
    flex: 1;
    height: $height;
    overflow-y: scroll;
    .member {
      display: flex;
      align-items: center;
      margin: 10px;
      cursor: pointer;
      .member-name {
        width: 150px;
        margin: 0 10px;
        color: $font-color;
        font-weight: 400;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
      }
      .member-avatar {
        width: 40px;
        height: 40px;
        margin: 0 30px;
      }
    }
  }
  .group-select {
    flex: 1;
    height: $height;
    overflow-y: scroll;
    .member {
      display: flex;
      align-items: center;
      margin: 10px;
      cursor: pointer;
      .member-name {
        width: 150px;
        margin: 0 10px;
        color: $font-color;
        font-weight: 400;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
      }
      .member-avatar {
        width: 40px;
        height: 40px;
        margin: 0 30px;
      }
      .delete-icon {
        font-size: 25px;
      }
    }
  }
}
</style>
